/**
 * 这个文件用于修改 vue-cli 默认的配置
 */

module.exports = {
  // chainWebpack 这个函数就是用于修改默认的配置
  // config 参数实际上就是所有的配置对象
  chainWebpack: config => {
    // config.when -- 提供一个判断条件
    config.when(process.env.NODE_ENV === 'production', config => {
      // config.entry  -- 修改默认的配置，这里是指修改默认的 app 配置，修改默认的构建配置
      // config.clear  -- 移除、清空所有的 app 配置
      // config.add    -- 新增配置
      config.entry('app').clear().add('./src/main-prod.js')

      // 使用 set 设置/修改别名
      config.set('externals', {
        // 键是使用的模块
        // 打包的过程中,如果发现使用了当前的模块,并不会去包中进行查找
        // 会到全局中查找是否存在值中的全局变量
        vue: 'Vue',
        'vue-router': 'VueRouter',
        axios: 'axios',
        lodash: '_',
        echarts: 'echarts',
        nprogress: 'NProgress',
        'vue-quill-editor': 'VueQuillEditor',
        dayjs: 'dayjs'
      })

      // plugin -- 调用脚手架的 html 插件
      config.plugin('html').tap(args => {
        // args 参数是指 html 插件中的参数
        // 往 Html 插件中追加一个变量 isProd
        args[0].isProd = true
        return args
      })
    })

    // 总结：判断当前的代码环境，去执行对应的回调函数
    // 在回调函数内部,首先找到默认的构建模式，并清空所有的配置
    // 在清空以后，添加自己的配置文件
    config.when(process.env.NODE_ENV === 'development', config => {
      config.entry('app').clear().add('./src/main-dev.js')

      // plugin -- 调用脚手架的 html 插件
      config.plugin('html').tap(args => {
        // args 参数是指 html 插件中的参数
        // 往 Html 插件中追加一个变量 isProd
        args[0].isProd = false
        return args
      })
    })
  }
}
